<template>
  <div class="my-elupload">
    <h1>使用EL-upload测试图片上传的预览效果</h1>
    <el-upload
      action="/your-upload-url"
      :show-file-list="true"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      list-type="picture"
      :auto-upload="false"
      multiple
    >
      <el-button size="small" type="primary">选择图片</el-button>
    </el-upload>
    <el-image
      v-for="item in fileList"
      :key="item.uid"
      :src="item.url"
      fit="contain"
      style="max-width:200px; max-height:200px; margin-top:10px;"
    ></el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleBeforeUpload(file) {
      console.log("----------1.handleBeforeUpload()....");
      // 生成图片预览的URL
      file.url = URL.createObjectURL(file.raw);
      this.fileList.push(file);
      return false; // 阻止自动上传
    },
    handleUploadSuccess(response, file) {
      file.url = response.data.url; // 根据后端返回的数据设置图片URL
    },
  }
};
</script>


<style>
.my-elupload {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
